<html>
<head>
	<title>资源权限列表</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script src="../../static/bootstrap/js/jquery-3.4.1.min.js" type="text/javascript"></script>
	<script src="../../static/bootstrap/js/static-resources.js"></script>
	<!--zTree js-->
	<link rel="stylesheet" href="../../static/bootstrap/js/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
	<script src="../../static/bootstrap/js/ztree/jquery.ztree.all.min.js"></script>
	<style type="text/css">
		.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
	</style>
<script type="text/javascript">
	$(function () {
		$(".footerPage").load("../footer.html");
		new Vue({
			el : '#app',
			mixins: [window.$DEFAULT_MIXIN],
			data: {
				pageInfo: {
					page: 1,
					size: 10,
					total: 0
				},
				roleList:[],
				actionList:[],
				selectedRole: null,
				selectedNode : null,
				actionCheckted: [],
				loading: false,
				showOverlay: false,
				// 菜单树形数据
				resoureTree: [],
				ztreeObj: null,
			},
			watch:{
			},
			computed:{
				paths(){
					return [
						{text: '首页', href: '/index.html'},
						{text: '系统设置', href: '#'},
						{text: '资源管理', href: '#'},
						{text: '资源权限列表', href: 'batch-console/SRolerightList.html'},
					]
				},
				fields(){
					return [
						{key:"selected", label:"选择", sortable:false},
						{key:"rolename", label:"角色名称", sortable:false}
					]
				},
				ZTREE_SETTINGS: function(){
					let self = this;
					return  {
						view: {
							selectedMulti: false
						},
						edit: {
							enable: false,
							showRenameBtn: false,
							showRemoveBtn: false,
							removeTitle: "删除",
						},
						data: {
							key: {
								name: "text",
								title: "text",
								children: "children",
								url: "",
							},
							simpleData: {
								enable: true,
								idKey: "id",
								pIdKey: "parentId",
							},
							keep: {
								parent: true,
								left: true
							}
						},
						callback: {
							//禁止拖拽
							beforeDrag: function(treeId, treeNodes) {
								return false;
							},
							beforeDrop: function(treeId, treeNodes, targetNode, moveType) {
								return false;
							},
							onClick: (e, treeId, treeNode) =>{
								this.handleTreeNodeClick(treeNode);
							}
						}
					}
				},
			},
			methods:{
				// 查询菜单树形数据 api/s/resource/all
				queryResourceAll(){
					JLEUtil.request("api/s/resource/all/root", "POST", null, null,
							(data, textStatus, jqXHR)=>{
								// success
								if (data){
									this.resourceTree = data;
									this.initzTree(data, this.ZTREE_SETTINGS);
								}
							},
							(jqXHR, textStatus, errorThrown)=>{
								//error
								this.$bvToast.toast(`加载菜单数据失败！ ${errorThrown}`, {
									title: '提示 ',
									toaster: 'b-toaster-top-center',
									solid: true
								});
							}
					);
				},
				initzTree(data, setting){
					this.ztreeObj = $.fn.zTree.init($("#resourceTree"), setting, data);
					this.$nextTick(()=>{
						this.ztreeObj.expandAll(true);
						/*let nodes = this.ztreeObj.getNodes();
						if (nodes && nodes.length > 0) {
							let node = nodes[0];
							this.ztreeObj.selectNode(node);
							this.$nextTick(()=> this.handleTreeNodeClick(node));
						}*/
					});
				},
				handleTreeNodeClick(node){
					this.selectedNode = node;
					if (node && node.id) {
						this.showOverlay = true;
						JLEUtil.request(`api/s/resource/${node.id}`, "GET", null, null, (data, textStatus, jqXHR)=>{
							this.queryActionList(node);
						}, ()=>this.showOverlay = false)
					}
				},
				destroyZtreeObj(){ //销毁ztree对象
					$.fn.zTree.destroy(this.ztreeObj.setting.treeId);
					if(this.ztreeObj.setting)
						this.ztreeObj.setting.treeObj = null  ;
				},
				queryActionList(node){
					if (node && node.id) {
						this.actionCheckted = [];
						JLEUtil.requestForm('api/s/resource/action/all', "POST", null, {resourceid: node.id}, (data, textStatus, jqXHR)=>{
							this.actionList = data.rows;
							// 查询已授权资源操作
							JLEUtil.requestForm("api/s/role/rights/all", "POST", null,
									{
										roleno: this.selectedRole.roleno,
										resourceid: node.id
									},
									(data, textStatus, jqXHR)=>{
										if (data.success) {
											this.actionCheckted = data.rows.map((value=>{ return value.actid}))
										}
										this.showOverlay = false;
									},
									()=>this.showOverlay = false
							);
						}, ()=>this.showOverlay = false)
					}
				},
				queryRoleList(page){
					if (page == true) {
						this.pageInfo.page = 1;
					}
					let self = this;
					let param = {};
					param.page = self.pageInfo.page;
					param.size = self.pageInfo.size;
					JLEUtil.requestForm("api/s/roles", "POST", null, param,
							function(data, textStatus, jqXHR){
								self.roleList = data.rows;
								self.pageInfo.total = data.total;
							},
							function(jqXHR, textStatus, errorThrown){

							}
					);
				},
				onRowSelected(items){
					this.selectedRole = items[0];
					if (this.selectedNode) {
						this.ztreeObj.cancelSelectedNode(this.selectedNode);
						this.selectedNode = null;
					}
					this.actionCheckted = [];
				},
				handleTbSelection(rowSelected, index) {
					if (rowSelected) {
						this.$refs.roleTb.unselectRow(index)
					} else {
						this.$refs.roleTb.selectRow(index)
					}
				},
				saveRoleRight(){
					this.loading = true;
					if (!(this.selectedRole && this.selectedRole.roleno)) {
						this.$bvToast.toast(`请选择角色`, {
							title: '提示 ',
							toaster: 'b-toaster-top-center',
							solid: true
						});
						return;
					}
					if (!(this.selectedNode && this.selectedNode.id)) {
						this.$bvToast.toast(`请选择系统菜单节点`, {
							title: '提示 ',
							toaster: 'b-toaster-top-center',
							solid: true
						});
						return;
					}
					let param = {};
					param.roleno = this.selectedRole.roleno;
					param.resourceid = this.selectedNode.id;
					param.actIdStr = this.actionCheckted.join(",");
					JLEUtil.request("api/s/role/right/save", "POST", null, param, (data, textStatus, jqXHR)=>{
						if(data.success){
							this.$bvToast.toast(data.message, {
								title: '提示 ',
								toaster: 'b-toaster-top-center',
								solid: true
							});
						}
						this.loading = false;
					}, ()=> this.loading = true);
				}
			},
			mounted(){
				this.queryRoleList();
				this.queryResourceAll();
			},
			beforeDestroy(){
				this.destroyZtreeObj();
			},
		})
	});

</script>
</head>
<body>
<div class="headerPage"></div>
<div id="app">
	<b-container fluid>
		<b-row align-h="center">
			<b-col sm="8" align-self="center">
				<!-- 面包屑导航 -->
				<!--<b-breadcrumb :items="paths" @click.prevent="handlePath"></b-breadcrumb>-->
			</b-col>
		</b-row>
		<b-row>
			<b-col>
				<div class="alert alert-secondary" role="alert">
					角色列表
				</div>
				<b-card>
					<b-table responsive hover selectable bordered fixed striped small ref="roleTb"
							 @row-selected="onRowSelected"
							 selected-variant="primary"
							 select-mode="single" :fields="fields" :items="roleList" >
						<template v-slot:table-colgroup="scope">
							<col
									v-for="field in scope.fields"
									:key="field.key"
									:style="{ width: field.key === 'selected' ? '25px' : '180px' }"
							>
						</template>
						<template v-slot:cell(selected)="{ rowSelected , index }">
							<div class="text-center">
								<b-form-checkbox :checked="rowSelected" unchecked-value="not_accepted" @change="handleTbSelection(rowSelected, index)"></b-form-checkbox>
							</div>
						</template>
						<template v-slot:cell()="data" >
							<div class="text-truncate">{{ data.value }}</div>
						</template>
					</b-table>
					<div class="float-right">
						<b-pagination
								v-model="pageInfo.page"
								:total-rows="pageInfo.total"
								:per-page="pageInfo.size"
								@change="queryRoleList"
						></b-pagination>
					</div>
				</b-card>
			</b-col>
			<b-col cols="6">
				<div class="alert alert-dark" role="alert">
					系统菜单
				</div>
				<b-card v-show="selectedRole != null">
					<div id="resourceTree" class="ztree"></div>
				</b-card>
			</b-col>
			<b-col>
				<div class="alert alert-secondary" role="alert">
					资源操作
				</div>
				<b-overlay :show="showOverlay" rounded="sm">
				<b-card v-if="selectedNode != null && selectedRole != null">
					<b-list-group>
						<b-form-checkbox-group v-model="actionCheckted" >
							<template v-for="(value, index) in actionList">
								<b-list-group-item>
									<b-form-checkbox :value="value.actid">{{value.descr}}</b-form-checkbox>
								</b-list-group-item>
							</template>
						</b-form-checkbox-group>
					</b-list-group>
					<div class="text-right mt-3">
						<b-button variant="primary" @click="saveRoleRight" :disabled="loading">
							<div v-if="loading">
								<b-spinner small></b-spinner>
								保存中...
							</div>
							<span v-else="loading">保存</span>
						</b-button>
					</div>
				</b-card>
				</b-overlay>
			</b-col>
		</b-row>
	</b-container>

</div>
<div class="footerPage"></div>
</body>
</html>
